﻿<UserControl x:Class="KegManager.KegControl"
             x:Name="Keg"
             xmlns:my="clr-namespace:KegManager"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="349" d:DesignWidth="263">
    <UserControl.Resources>
        <my:KegVolumeConverter x:Key="KegVolumeConverter" />
        <my:KegPintsConverter x:Key="KegPintsConverter" />
        <my:BeerColorConverter x:Key="BeerColorConverter" />
    </UserControl.Resources>
    <Grid>
        <Viewbox>
            <Canvas Height="300" Width="100">
                <Image Source="/KegManager;component/resources/kegbackground.png" Height="300"/>

                <Rectangle Canvas.Bottom="28" Canvas.Left="1" Height="{Binding Path=Value, ElementName=Keg, Mode=OneWay, Converter={StaticResource KegVolumeConverter}}" Width="96">
                    <Rectangle.Fill>
                        <ImageBrush  Stretch="UniformToFill" Opacity="{Binding Path=FillOpacity, ElementName=Keg, Mode=OneWay}" ImageSource="{Binding Path=Color, ElementName=Keg, Mode=OneWay, Converter={StaticResource BeerColorConverter}}" />
                    </Rectangle.Fill>
                    <Rectangle.Clip>
                        <PathGeometry>
                            <PathGeometry.Figures>
                                <PathFigure StartPoint="0,0">
                                    <PathFigure.Segments>
                                        <!--<PolyLineSegment Points="0,0 49,30 98,0" />-->
                                        <QuadraticBezierSegment Point1="49,15" Point2="98,0" />

                                        <LineSegment Point="98,270" />
                                        <LineSegment Point="0,270" />
                                        <LineSegment Point="0,0" />
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </Rectangle.Clip>
                </Rectangle>

                <Image Source="/KegManager;component/resources/kegforeground.png" Height="300"/>

                <Grid Canvas.Top="240" Width="100" Visibility="{Binding Path=ShowPints, ElementName=Keg, Mode=OneWay}">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="1" Orientation="Horizontal">
                        <TextBlock Text="{Binding Path=Value, ElementName=Keg, Mode=OneWay, Converter={StaticResource KegPintsConverter}}" FontWeight="Bold" FontSize="18"/>
                        <TextBlock Margin="5,0,0,0" FontWeight="Bold" FontSize="18">Pints</TextBlock>
                    </StackPanel>
                </Grid>
            </Canvas>
        </Viewbox>
    </Grid>
</UserControl>
